<template>
  <div>
    <div class="rich-text-wrapper">
      <div
        v-html="content"
        id="rich-content"
        ref="contentRef"
      ></div>
    </div>
  </div>
</template>

<script setup>
// const jQuery = require('jquery');

const props = defineProps({
    authorInfo: { // 作者信息 name名字 avatar头像
        type: Object,
        default() {
            return {};
        }
    },
    content: {
        type: String,
        default: ''
    }
});
</script>

<style lang="scss">
.rich-text-wrapper {
  color: #111a38;
  width: 100%;
  word-break: break-all;
  overflow: hidden;
  white-space: pre-wrap;
  // .top-bar {
  //   display: none;
  // }
  * {
    position: relative!important;
    max-width: 100%;
    overflow: hidden;
  }
  em {
    font-style: italic;
  }
  img {
    cursor: pointer;
    max-width: 100%;
    height: auto;
  }
  a {
    text-decoration: none;
  }
  iframe {
    width: 100%;
  }
  p {
    line-height: 1.6;
    margin: 0px;
  }
  table {
    word-wrap: break-word;
    word-break: break-all;
    max-width: 100%;
    border: none;
    border-color: #999;
  }
  .mce-object-iframe {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  ul,
  ol {
    list-style-position: inside;
  }
  ul{
    list-style: inherit;
    list-style-position: inside;
  }
  li {
    list-style: inside;
  }
  strong {
    font-weight: bold;
  }
}
</style>
